<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .game-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }
        h1 {
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        input[type="number"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        .feedback {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        .attempts {
            margin-top: 10px;
            font-size: 14px;
        }
        .reset-button {
            margin-top: 20px;
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>猜数字游戏</h1>
        <p>我有一个1到100之间的数字，你能猜到它是多少吗？</p>
        <div class="input-group">
            <input type="number" id="guess-input" min="1" max="100" placeholder="输入你的猜测" required>
            <button id="guess-button">提交</button>
        </div>
        <div class="feedback" id="feedback"></div>
        <div class="attempts" id="attempts">你还有 10 次尝试机会。</div>
        <button class="reset-button" id="reset-button">重新开始</button>
    </div>

    <script>
        let targetNumber = Math.floor(Math.random() * 100) + 1;
        let attemptsLeft = 10;
        let hasWon = false;

        document.getElementById('guess-button').addEventListener('click', checkGuess);
        document.getElementById('reset-button').addEventListener('click', resetGame);

        function checkGuess() {
            if (hasWon || attemptsLeft <= 0) return;

            const guessInput = document.getElementById('guess-input');
            const feedback = document.getElementById('feedback');
            const attemptsText = document.getElementById('attempts');

            const guess = parseInt(guessInput.value, 10);
            if (isNaN(guess) || guess < 1 || guess > 100) {
                feedback.textContent = '请输入一个1到100之间的有效数字。';
                guessInput.value = '';
                return;
            }

            attemptsLeft--;
            attemptsText.textContent = `你还有 ${attemptsLeft} 次尝试机会。`;

            if (guess === targetNumber) {
                feedback.textContent = `恭喜你，猜对了！数字是 ${targetNumber}。`;
                hasWon = true;
                document.getElementById('guess-button').disabled = true;
            } else if (guess < targetNumber) {
                feedback.textContent = '太小了，再试一次！';
            } else {
                feedback.textContent = '太大了，再试一次！';
            }

            guessInput.value = '';

            if (attemptsLeft <= 0 && !hasWon) {
                feedback.textContent = `很遗憾，你没有猜对。正确答案是 ${targetNumber}。`;
                document.getElementById('guess-button').disabled = true;
            }
        }

        function resetGame() {
            targetNumber = Math.floor(Math.random() * 100) + 1;
            attemptsLeft = 10;
            hasWon = false;
            document.getElementById('guess-input').value = '';
            document.getElementById('feedback').textContent = '';
            document.getElementById('attempts').textContent = `你还有 ${attemptsLeft} 次尝试机会。`;
            document.getElementById('guess-button').disabled = false;
        }
    </script>
</body>
</html>